<!-- 会议详情 -->
<template>
  <div class="meeting-detail-container">
    <van-nav-bar :left-arrow="true"
                 title="会议详情"
                 @click-left="onClickLeft"></van-nav-bar>

    <van-collapse v-model="activeNames">
      <van-collapse-item title="会议号"
                         value="123456789123456789"
                         name="1"
                         :is-link="false"
                         :readonly="true"></van-collapse-item>
      <van-collapse-item title="会议类型"
                         value="临时会议"
                         name="2"
                         :is-link="false"
                         :readonly="true"></van-collapse-item>
      <van-collapse-item title="会议发起人"
                         value="张三"
                         name="3"
                         :is-link="false"
                         :readonly="true"></van-collapse-item>
      <van-collapse-item title="会议预定时间"
                         value="2021-02-06 12:25:56"
                         name="4"
                         :is-link="false"
                         :readonly="true"></van-collapse-item>
      <van-collapse-item title="会议开始时间"
                         value="2021-02-06 12:25:56"
                         name="5"
                         :is-link="false"
                         :readonly="true"></van-collapse-item>
      <van-collapse-item title="会议结束时间"
                         value="2021-02-06 12:25:56"
                         name="6"
                         :is-link="false"
                         :readonly="true"></van-collapse-item>
      <van-collapse-item title="参会时间"
                         value="总计：126 秒"
                         name="7">
        <van-cell center
                  title="起: 2021-02-06 12:25:56 止: 2021-02-06 12:25:56"
                  value="总计：50 秒" />
        <van-cell center
                  title="起: 2021-02-06 12:25:56 止: 2021-02-06 12:25:56"
                  value="总计：60 秒" />
      </van-collapse-item>
      <van-collapse-item title="参会成员"
                         value="总计：50 人"
                         name="8">
        <van-cell center
                  title="张三，李四，王五，二牛，西门吹雪，断臂球员，一地鸡毛"
                  value="总计：50 人" />
      </van-collapse-item>

      <van-collapse-item title="会议记录"
                         name="9">
        <van-cell center
                  title="文档记录">
          <template #value>
            <a href="#">查看</a>
          </template>
        </van-cell>
        <van-cell center
                  title="白板记录">
          <template #value>
            <a href="#">查看</a>
          </template>
        </van-cell>
        <van-cell center
                  title="聊天记录">
          <template #value>
            <a href="#">查看</a>
          </template>
        </van-cell>
      </van-collapse-item>
      <van-collapse-item title="会议回放"
                         name="10"
                         :is-link="false"
                         :readonly="true">
        <template #value>
          <a href="#">查看</a>
        </template>
      </van-collapse-item>

      <van-collapse-item title="会议状态"
                         name="11"
                         value="已结束"
                         :is-link="false"
                         :readonly="true">
      </van-collapse-item>
    </van-collapse>
    <div class="meeting-btn-container">
      <van-button type="success"
                  block
                  round
                  class="meeting-btn">加入会议</van-button>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return { activeNames: [1] };
  },
  //方法集合
  methods: {
    onClickLeft () {
      this.$router.go(-1);
    },
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  //生命周期 - 创建之前
  beforeCreate () { },
  //生命周期 - 挂载之前
  beforeMount () { },
  //生命周期 - 更新之前
  beforeUpdate () { },
  //生命周期 - 更新之后
  updated () { },
  //生命周期 - 销毁之前
  beforeUnmount () { },
  //生命周期 - 销毁完成
  unmounted () { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated () { },
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.meeting-detail-container {
}
.meeting-btn-container {
  display: flex;
  justify-content: space-around;
}
.meeting-btn {
  margin-top: 40px;
  width: 300px;
}
</style>
